<template>
    <div class="ex-media-infos">
        <div class="em-title">
            Media Infos
        </div>
        <div class="em-des">
            Introduction to Media Information
        </div>
        <div class="em-content">
            <div class="em-card " v-if="mediaInfo_1">
                <div @click="turnTo(mediaInfo_1.type,mediaInfo_1.id)">
                    <div class="emc-img">
                        <img :src="mediaInfo_1.thumbnailUrl">
                    </div>
                    <div class="emc-type">
                        {{ mediaInfo_1.contentType }}
                    </div>
                    <div class="emc-title">
                        {{ mediaInfo_1.title }}
                    </div>
                    <div class="emc-content">
                        {{ mediaInfo_1.des }}
                    </div>
                    <div class="emc-date">
                        {{ dateFilter(mediaInfo_1.publishTime, "MM/dd/yyyy") }}
                    </div>
                </div>
                <div class="emc-btn" @click="downloadClick(mediaInfo_2.pdfResourceUrl)"></div>
            </div>
            <div class="em-card" v-if="mediaInfo_2">
                <div @click="turnTo(mediaInfo_2.type,mediaInfo_2.id)">
                    <div class="emc-img">
                        <img :src="mediaInfo_2.thumbnailUrl">
                    </div>
                    <div class="emc-type">
                        {{ mediaInfo_2.contentType }}
                    </div>
                    <div class="emc-title">
                        {{ mediaInfo_2.title }}
                    </div>
                    <div class="emc-content">
                        {{ mediaInfo_2.des }}
                    </div>
                    <div class="emc-date">
                        {{ dateFilter(mediaInfo_2.publishTime, "MM/dd/yyyy") }}
                    </div>
                </div>
                <div class="emc-btn" @click="downloadClick(mediaInfo_2.pdfResourceUrl)"></div>
            </div>
            <div class="em-card" v-if="mediaInfo_3">
                <div @click="turnTo(mediaInfo_3.type,mediaInfo_3.id)">
                    <div class="emc-img">
                        <img :src="mediaInfo_3.thumbnailUrl">
                    </div>
                    <div class="emc-type">
                        {{ mediaInfo_3.contentType }}
                    </div>
                    <div class="emc-title">
                        {{ mediaInfo_3.title }}
                    </div>
                    <div class="emc-content">
                        {{ mediaInfo_3.des }}
                    </div>
                    <div class="emc-date">
                        {{ dateFilter(mediaInfo_3.publishTime, "MM/dd/yyyy") }}
                    </div>
                </div>
                <div class="emc-btn" @click="downloadClick(mediaInfo_3.pdfResourceUrl)"></div>
            </div>
        </div>
        <div class="pagination-box">
            <el-pagination @current-change="handleChange" :page-size="query.size" layout="prev, pager, next"
                           :total="query.total"/>
        </div>
    </div>
</template>
<script setup lang="ts">

    const props = defineProps({
        data: {
            type: Object,
            required: true,
        },
        time: {
            type: String,
            required: false,
        },
    });
    const query = reactive({
        page: 1,
        size: 3,
        total: 10,
    });

    const mediaInfo_1 = ref(props.data[0]);
    const mediaInfo_2 = ref(props.data[1]);
    const mediaInfo_3 = ref(props.data[2]);

    query.total = props.data.length;

    const downloadClick = (url: string) => {
        // 创建一个隐藏的 a 标签
        if (!url || url == "null") return;
        const filePath = url;
        let a = document.createElement('a');
        a.href = filePath;
        a.target = '_blank';
        a.download = ''; // 设置 download 属性可以触发下载
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }

    const config = useRuntimeConfig();
    const router = useRouter();
    const hostURL = config.public.hostURL;
    const turnTo = (type, id) => {
        router.push({
            path: `/${type}/${id}`
        })
        // window.open(`${hostURL}/${type}/${id}`);
    }

    const handleChange = (page: number) => {

        let currentPage = document.querySelectorAll('.em-card');
        // var nextPage = document.querySelector('.epc-card')

        for (let i = 0; i < currentPage.length; i++) {
            currentPage[i].classList.toggle('fade-out');
        }

        setTimeout(() => {
            page = (page - 1) * 3;
            mediaInfo_1.value = props.data[page];
            mediaInfo_2.value = props.data[page + 1];
            mediaInfo_3.value = props.data[page + 2];
            for (let i = 0; i < currentPage.length; i++) {
                currentPage[i].classList.toggle('fade-out');
            }

        }, 300);
    }
</script>
<style scoped lang="scss">
    .ex-media-infos {
        // position: relative;
        width: 1760px;
        background-color: #fff;
        overflow-x: hidden;
        padding-left: 160px;
        padding-bottom: 96px;

        .em-title {
            height: 110px;
            line-height: 110px;
            font-weight: 600;
            font-size: 64px;
            background-image: -webkit-linear-gradient(180deg, #26B7BC 0%, #26B7BC 70%, #BB916C);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .em-des {
            margin-top: 7px;
            font-size: 16px;
            margin-bottom: 53px;
        }

        .em-content {
            // width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;

            .em-card {
                width: 542px;
                cursor: pointer;
                opacity: 1; /* 初始状态为隐藏 */
                transition: opacity 0.5s ease; /* 设置过渡效果 */

                .emc-img {
                    width: 506px;
                    height: 290px;
                    overflow: hidden;

                    img {
                        width: 506px;
                        height: 290px;
                        object-fit: cover;
                        transition: all 0.6s;
                    }

                    background-color: rgba(0, 0, 0, 0.1);
                    margin-bottom: 21px;
                }

                .emc-type {
                    width: 200px;
                    color: #C78E66;
                    font-size: 14px;
                    margin-bottom: 24px;
                    font-weight: bold;
                }

                .emc-title {
                    width: 506px;
                    height: 50px;
                    color: #000;
                    font-size: 20px;
                    font-weight: 600;
                    margin-bottom: 16px;
                    line-height: 32px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .emc-content {
                    position: relative;
                    width: 506px;
                    height: 85px;
                    font-size: 12px;
                    color: #000;
                    margin-bottom: 16px;
                    line-height: 22px;
                    overflow: hidden;
                    //text-overflow: ellipsis;
                    //display: -webkit-box;
                    ///* 第三行溢出省略 */
                    //-webkit-line-clamp: 3;
                    //-webkit-box-orient: vertical;
                }

                .emc-date {
                    width: 100%;
                    color: rgba(0, 0, 0, 0.2);
                    margin-bottom: 24px;
                    font-size: 14px;
                }

                .emc-btn {
                    width: 32px;
                    height: 32px;
                    background-image: url('/images/home/组23@2x.png');
                    background-size: cover;
                    border: 2px dashed rgba(0, 0, 0, 0.2);
                    cursor: pointer;
                    transition: background-color .3s;
                }
            }

            .em-card:hover .emc-img img {
                transform: scale(1.05);
            }

            .fade-out {
                opacity: 0; /* 隐藏状态 */
            }

        }

        .em-more-btn {
            margin-top: 65px;
            width: 296px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: rgb(199, 142, 102, 0.08);
            border-bottom: 4px solid rgba(199, 142, 102, 1);
            color: #000000;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 16px;
        }

        .em-more-btn:hover {
            background-color: rgba(199, 142, 102, 0.3);
            border-bottom: 4px solid rgba(199, 142, 102, 0.8);
            /* 鼠标悬浮时显示蓝色下边框 */
            transition: background-color 0.5s ease, border-bottom-color 0.5s ease;
            /* 渐变过渡效果 */
        }

        .pagination-box {
            //position: relative;
            margin-top: 20px;
            margin-left: 1300px;

            :deep(.number) {
                font-size: 18px;
            }

            :deep(svg) {
                width: 18px;
                height: 18px;
            }
        }
    }
</style>
